<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>clip planes</title>
    <link rel="stylesheet" href="niivue.css" />
  </head>
  <body>
    <noscript>niivue requires JavaScript.</noscript>
    <header>
      <label for="check1">Shade Volume</label>
      <input type="checkbox" id="check1" name="check1" value="false" />
      <label for="alphaSlider">Opacity</label>
      <input
        type="range"
        min="1"
        max="255"
        value="128"
        class="slider"
        id="alphaSlider"
      />
      <label for="colorSlider">Color</label>
      <input
        type="range"
        min="0"
        max="255"
        value="0"
        class="slider"
        id="colorSlider"
      />
      <label for="thickSlider">Thickness</label>
      <input
        type="range"
        min="1"
        max="173"
        value="33"
        class="slider"
        id="thickSlider"
      />
      <label for="hippoSlider">Hippocampus</label>
      <input
        type="range"
        min="0"
        max="255"
        value="255"
        class="slider"
        id="hippoSlider"
      />
      <label for="statSlider">Statistics</label>
      <input
        type="range"
        min="1"
        max="35"
        value="25"
        class="slider"
        id="statSlider"
      />
      <label for="nodeSlider">Node</label>
      <input type="range" min="5" max="80" value="30" class="slider" id="nodeSlider" />
      <label for="fiberRadius">FiberRadius</label>
      <input
        type="range"
        min="0"
        max="20"
        value="0"
        class="slider"
        id="fiberRadius"
      />
    </header>
    <main>
      <canvas id="gl1"></canvas>
    </main>
    <footer>
      <x id="intensity"> &nbsp;</x>
    </footer>
    <script type="module" async>
      import * as niivue from "../dist/index.js";
      check1.onclick = function () {
        let clr = nv1.opts.clipPlaneColor;
        console.log(clr);
        clr[3] = Math.abs(clr[3]);
        if (this.checked) clr[3] = -clr[3];
        nv1.setClipPlaneColor(clr);
      };
      alphaSlider.oninput = function () {
        let clr = nv1.opts.clipPlaneColor;
        let rev = clr[3] < 0;
        clr[3] = this.value / 255;
        if (rev) clr[3] = -clr[3];
        nv1.setClipPlaneColor(clr);
      };
      colorSlider.oninput = function () {
        let clr = nv1.opts.clipPlaneColor;
        clr[1] = this.value / 255;
        nv1.setClipPlaneColor(clr);
      };
      thickSlider.oninput = function () {
        nv1.setClipPlaneThick(this.value / 173)
      };
      hippoSlider.oninput = function () {
        nv1.setOpacity(1, this.value /255);
      };
      statSlider.oninput = function () {
        nv1.setMeshLayerProperty(nv1.meshes[0].id, 0, "cal_min", this.value);
      }
      nodeSlider.oninput = function () {
        nv1.setMeshProperty(nv1.meshes[1].id, "nodeScale", this.value * 0.1);
      };
      fiberRadius.oninput = function () {
        nv1.setMeshProperty(nv1.meshes[2].id, "fiberRadius", this.value * 0.1)
        nv1.updateGLVolume()
      }
      function handleIntensityChange(data) {
        console.log(nv1)
        let idx = nv1.indexNearestXYZmm(nv1.meshes[0].id, data.mm[0],data.mm[1],data.mm[2])
        function flt2str(flt, decimals = 0) {
          return parseFloat(flt.toFixed(decimals))
        }
        let deci = 0
        let str = flt2str(data.mm[0], deci) + '×' + flt2str(data.mm[1], deci) + '×' + flt2str(data.mm[2], deci)
        str += ' Vertex '+ flt2str(idx[0], 0) +' is ' + flt2str(idx[1], 2) + 'mm from crosshairs'
        document.getElementById("intensity").innerHTML = str
      }
      var volumeList1 = [
        {url: "../images/mni152.nii.gz"},
        {
          url: "../images/hippolr.nii.gz", 
          colormap: "red",
        }
      ];
      var nv1 = new niivue.Niivue({
        show3Dcrosshair: true,
        backColor: [0.5, 0.5, 0.6, 1],
        onLocationChange: handleIntensityChange,
      });
      await nv1.attachTo("gl1");
      nv1.setClipPlane([-0.12, 180, 40]);
      nv1.setRenderAzimuthElevation(230,15)
      nv1.setSliceType(nv1.sliceTypeMultiplanar);
      nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS;
      thickSlider.oninput()
      await nv1.loadVolumes(volumeList1);
      var meshLayersList1 = [
        {
          url: "../images/pval.LH.nii.gz",
          cal_min: 25,
          cal_max: 35.0,
          opacity: 1,
        },
      ];
      await nv1.loadMeshes([
        {
          url: "../images/lh.pial",
          rgba255: [212, 244, 212, 255],
          layers: meshLayersList1,
        },
        { url: "../images/connectome.jcon" },
        { url: "../images/dpsv.trx" },
      ]);
    </script>
  </body>
</html>
